/*
 * @Author: cygao 
 * @Date: 2017-11-23 19:50:41 
 * @Last Modified by: cygao
 * @Last Modified time: 2017-11-27 12:13:33
 */

<template>
  <div id="verify-hosue-common">
    <div class="step">
      <flow>
        <flow-state title="验证房源" is-done></flow-state>
        <flow-line></flow-line>

        <flow-state title="房屋信息"></flow-state>
        <flow-line></flow-line>

        <flow-state title="出租信息"></flow-state>
        <flow-line></flow-line>

        <flow-state title="发布房源"></flow-state>
      </flow>
    </div>
    <div class="start-tips">
      <p>1.请优先下载委托书模板，签字后拍照上传;</p>
      <p>2.所有共有产权人在一份委托书上签署即可。</p>
    </div>
    <div class="verify-item">
      <div class="verify-img-title">
        <span>共有产权人授权委托书</span>
      </div>
      <!-- <div class="upload-img-title">提示：所有共有产权人在一份委托书上签署即可</div> -->
      <div class="verify-upload-img">
        <div class="upload-img-item">
          <label class="m-img" for="file1001">
            <input id="file1001" multiple style="display:none;" type="file" >
            <img :src="wtsArray[0]" alt="">
          </label>
          <div class="m-tips">授权委托书</div>
        </div>
        <div class="upload-img-item">
          <div class="m-download-img">
            <a href="http://szajimgs-1254325618.cosgz.myqcloud.com/%E6%8E%88%E6%9D%83%E5%A7%94%E6%89%98%E4%B9%A6.doc"><img src="../../../images/rentHouse/downloadImg.png" alt=""></a>
          </div>
          <!-- <div class="m-tips">下载模板</div> -->
        </div>
      </div>
    </div>
    <div class="verify-item" v-for="(item, index) in peopleNum" :key="index">
      <div class="verify-img-title">
        <span>共有产权人({{index+1}})身份证明</span>
        <div @click="delCommonPerson(index)" v-if="index>0" class="verify-del">
          删除
        </div>
      </div>
      <!-- <div @click="delCommonPerson()" class="verify-del">
        删除
      </div> -->
      <!-- <div class="input-item m-border">
        <span>共有人姓名 : </span><input class="m-input" v-model="nameArray[index]" type="text" placeholder="请输入姓名">
      </div>
      <div class="input-item m-border">
        <span>共有人身份证号 : </span><input class="m-input" v-model="idCardArray[index]" type="text" placeholder="请输入身份证号">
      </div> -->
      <!-- <div class="upload-img-title">共有产权人身份证明：</div> -->
      <div class="verify-upload-img">
        <div class="upload-img-item">
          <label class="m-img" :for="`file${index*2}`">
            <input :id="`file${index*2}`" multiple style="display:none;" type="file" >
            <img :src="cardIamgeArray1[index]" alt="">
          </label>
          <div class="m-tips">身份证(人像面)</div>
        </div>
        <div class="upload-img-item">
          <label class="m-img" :for="`file${index*2+1}`">
            <input :id="`file${index*2+1}`" multiple style="display:none;" type="file" >
            <img :src="cardIamgeArray2[index]" alt="">
          </label>
          <div class="m-tips">身份证(国徽面)</div>
        </div>
        <form ref="formTrueName" class="form" style="overflow: hidden" action="https://iauth-sandbox.wecity.qq.com/new/cgi-bin/startocr.php" method="post">
          <input type="hidden" name="token" :value="token">
          <input type="hidden" name="appid" :value="appid">
          <input type="hidden" name="signature" :value="signature">
          <input type="hidden" name="redirect" :value="redirect">
        </form>
      </div>
    </div>
    <div class="verify-item">
      <div @click="addCommonPerson()" class="verify-add">
        <p style="color:#ff9600;font-size:20px;">＋添加共有产权人</p>
        <p style="color:#999">需要添加所有共有产权人的身份证明</p>
      </div>
    </div>
    <div class="verify-btn">
      <x-button type="primary" @click.native="verifyHouseCommon">下一步</x-button>
    </div>
    <x-dialog v-model="hintDialog" class="dialog-hint">
      <!-- <h3 class="infoConfirm-hint">租金提示</h3> -->
      <!-- <p class="hint-black">您需要知悉如下关于租金的信息：</p> -->
      <ol class="hint-content">
        <li>1.请优先下载委托书模板，签字后拍照上传;</li>
        <li>2.所有共有产权人在一份委托书上签署即可。</li>
      </ol>
      <!-- <x-button type="primary" @click.native="hintDialog1 = false">我已知道</x-button> -->
      <i class="icon icon-close" @click="hintDialog = false"></i>
    </x-dialog>
  </div>
</template>
<script>
import UploadFileByTXY from '../../../util/uploadFileByTXY'
// import crypto from 'crypto'
export default {
  data () {
    return {
      hintDialog: false,
      peopleNum: 1, // 共有产权人人数
      downloadImg: require('../../../images/rentHouse/downloadImg.png'), // 下载图片
      imgDefault: require('../../../images/rentHouse/uploadImg.png'), // 上传默认图
      nameArray: [], // 姓名数组
      idCardArray: [], // 身份证数组
      cardIamgeArray1: [], // 身份证人像面图片数组
      cardIamgeArray2: [], // 身份证国徽面图片数组
      wtsArray: [], // 委托书图片数组
      uid: JSON.parse(localStorage.getItem('userInfo')).userId,
      endToken: this.$route.query.token ? this.$route.query.token : '', // 获取信息需要的token
      currentPerson: 0, // 当前验证的人
      token: '', // token令牌
      appid: '4484', // 公众号APPID
      signature: null, // 签名
      secretkey: 'a5f3e0d3288e0ebe4a2b6d303849291b', // 密钥
      redirect: 'http://szajh5test.chudaokeji.com/verifyHouseCommon' // 回调地址
      // redirect: 'http://192.168.1.48:1010/verifyHouseCommon' // 回调地址
    }
  },
  created () {
    if (this.endToken) {
      this.hintDialog = false
    } else {
      this.hintDialog = false
    }
  },
  mounted () {
    // 委托书上传
    UploadFileByTXY.upload({
      id: 'file1001',
      callback: (res) => {
        this.$set(this.wtsArray, 0, res.url)
        console.log('sss')
      }
    }, true)
    let commonPersonData = JSON.parse(localStorage.getItem('commonPersonData') || '{}')
    console.log(commonPersonData)
    // 当路由带有token取出本地内存数据重载页面
    if (this.endToken) {
      this.peopleNum = commonPersonData.peopleNum // 人数
      for (let i = 1; i <= this.peopleNum; i++) {
        // this.uploadImage(i)
        this.$nextTick(() => {
          this.uploadImage(i)
          this.nameArray = commonPersonData.nameArray // 姓名数组
          this.idCardArray = commonPersonData.idCardArray // 身份证数组
          this.cardIamgeArray1 = commonPersonData.cardIamgeArray1 // 人像面数组
          this.cardIamgeArray2 = commonPersonData.cardIamgeArray2 // 国徽面数组
          this.wtsArray = commonPersonData.wtsArray // 委托书数组
        })
        // this.uploadImage(i) // 初始化
      }
      // this.nameArray = commonPersonData.nameArray // 姓名数组
      // this.idCardArray = commonPersonData.idCardArray // 身份证数组
      // this.cardIamgeArray1 = commonPersonData.cardIamgeArray1 // 人像面数组
      // this.cardIamgeArray2 = commonPersonData.cardIamgeArray2 // 国徽面数组
      // this.wtsArray = commonPersonData.wtsArray // 委托书数组
    } else {
      this.uploadImage(this.peopleNum) // 初始化
    }
    // this.uploadImage(this.peopleNum) // 初始化
    // 当路由里面带有token就获取身份证信息(暂时不获取身份证号)
    if (this.endToken && commonPersonData.pictype === 0) {
      // console.log('token', this.endToken)
      this.$axiosPosting(this.$api.getdetectinfo, {token: this.endToken}).then(res => {
        // console.log(res)
        if (res.code === '0000') {
          if (this.idCardArray.indexOf(res.data.ID) === -1) {
            this.idCardArray[commonPersonData.currentPerson] = res.data.ID
            this.nameArray[commonPersonData.currentPerson] = res.data.name
            // console.log(this.peopleIdData)
          } else {
            this.$set(this.cardIamgeArray1, commonPersonData.currentPerson, this.imgDefault)
            // this.cardIamgeArray1[commonPersonData.currentPerson] = this.imgDefault // 清空验证失败照片，重新认证
            this.$vux.toast.text('身份信息重复，请重新上传身份证照片认证！')
          }
        } else {
          this.$set(this.cardIamgeArray1, commonPersonData.currentPerson, this.imgDefault)
          // this.cardIamgeArray1[commonPersonData.currentPerson] = this.imgDefault // 清空验证失败照片，重新认证
          this.$vux.toast.text('获取身份信息失败，请重新上传身份证照片认证！')
        }
      })
    }
  },
  // 离开路由，缓存数据
  // beforeRouteLeave (to, from, next) {
  //   console.log(to, 1111)
  //   let commonPersonData = {
  //     peopleNum: this.peopleNum, // 共有产权人人数
  //     nameArray: this.nameArray, // 姓名数组
  //     idCardArray: this.idCardArray, // 身份证数组
  //     cardIamgeArray1: this.cardIamgeArray1, // 人像面数组
  //     cardIamgeArray2: this.cardIamgeArray2, // 国徽面数组
  //     wtsArray: this.wtsArray, // 委托书数组
  //     pictype: 0 // 身份证正面
  //   }
  //   localStorage.setItem('commonPersonData', JSON.stringify(commonPersonData))
  //   next()
  // },
  methods: {
    // 跳转下一步
    verifyHouseCommon () {
      let commonPersonData = {
        nameArray: this.nameArray, // 姓名数组
        idCardArray: this.idCardArray, // 身份证数组
        cardIamgeArray1: this.cardIamgeArray1, // 人像面数组
        cardIamgeArray2: this.cardIamgeArray2, // 国徽面数组
        wtsArray: this.wtsArray // 委托书数组
      }
      localStorage.setItem('commonPersonData', JSON.stringify(commonPersonData))
      if (this.nameArray.length === this.peopleNum) {
        this.$router.push({path: './houseInfo'})
      } else {
        this.$vux.toast.text('请完成页面需要上传的信息！')
      }
    },
    // 添加共有产权人
    addCommonPerson () {
      this.peopleNum += 1
      this.$nextTick(() => {
        this.uploadImage(this.peopleNum)
      })
    },
    delCommonPerson (index) {
      this.peopleNum -= 1
      this.$nextTick(() => {
        this.cardIamgeArray1.splice(index, 1)
        this.cardIamgeArray2.splice(index, 1)
        this.wtsArray.splice(index, 1)
        this.nameArray.splice(index, 1)
      })
    },
    // 上传图片函数,传入参数单表第几个
    uploadImage (index) {
      // 默认图赋值
      let i = index - 1
      console.log('i', i)
      // 第一个进入的时候赋值
      // if (number === 1) {
      //   this.$set(this.cardIamgeArray1, i, this.imgDefault)
      //   this.$set(this.cardIamgeArray2, i, this.imgDefault)
      //   this.$set(this.wtsArray, i, this.imgDefault)
      // }
      this.$set(this.cardIamgeArray1, i, this.cardIamgeArray1[i] ? this.cardIamgeArray1[i] : this.imgDefault)
      this.$set(this.cardIamgeArray2, i, this.cardIamgeArray2[i] ? this.cardIamgeArray2[i] : this.imgDefault)
      this.$set(this.wtsArray, 0, this.wtsArray[0] ? this.wtsArray[0] : this.imgDefault)
      // this.cardIamgeArray1[i] = this.imgDefault
      // this.cardIamgeArray2[i] = this.imgDefault
      // this.wtsArray[i] = this.imgDefault
      // 人像面验证
      UploadFileByTXY.upload({
        id: 'file' + (i * 2),
        callback: (res) => {
          this.$set(this.cardIamgeArray1, i, res.url)
          // console.log('++++++++++++sss')
          // 验证前需要把人数、照片、当前验证人存储本地
          let commonPersonData = {
            currentPerson: i, // 当前验证人
            peopleNum: this.peopleNum, // 共有产权人人数
            nameArray: this.nameArray, // 姓名数组
            idCardArray: this.idCardArray, // 身份证数组
            cardIamgeArray1: this.cardIamgeArray1, // 人像面数组
            cardIamgeArray2: this.cardIamgeArray2, // 国徽面数组
            wtsArray: this.wtsArray, // 委托书数组
            pictype: 0 // 身份证人像面
          }
          localStorage.setItem('commonPersonData', JSON.stringify(commonPersonData))
          // 第一步预提交OCR
          let requestData = {
            imageContent: res.verifyBase64.split(',')[1], // 图片base64编码
            pictype: 0,
            uid: JSON.parse(localStorage.getItem('userInfo')).id // 用户id
          }
          // console.log(requestData)
          this.$axiosPost(this.$api.postocrinfo, requestData).then(res => {
            // this.$vux.loading.hide()
            if (res.code === '0000') {
              // console.log(JSON.parse(res.data).token)
              // 第二步获取签名接口
              this.$axiosPost(this.$api.postStartocr, {token: JSON.parse(res.data).token}).then(res => {
                // console.log(res)
                if (res.code === '0000') {
                  // console.log(res.data)
                  this.token = res.data.token
                  this.signature = res.data.signature
                  this.$vux.loading.hide()
                  // 第三步提交form表单开始OCR认证
                  this.$nextTick(() => {
                    // console.log(this.$refs.formTrueName)
                    this.$refs.formTrueName[0].submit()
                  })
                } else {
                  this.$vux.loading.hide()
                  this.$vux.toast.text('无法识别，请重新上传身份证照片认证！')
                }
              })
            } else {
              this.$vux.loading.hide()
              this.$vux.toast.text('无法识别，请重新上传身份证照片认证！')
            }
          })
        }
      }, true)
      // 国徽面验证
      UploadFileByTXY.upload({
        id: 'file' + (i * 2 + 1),
        callback: (res) => {
          this.$set(this.cardIamgeArray2, i, res.url)
          // console.log('++++++++++++sss')
          // 验证前需要把人数、照片、当前验证人存储本地
          let commonPersonData = {
            currentPerson: i, // 当前验证人
            peopleNum: this.peopleNum, // 共有产权人人数
            nameArray: this.nameArray, // 姓名数组
            idCardArray: this.idCardArray, // 身份证数组
            cardIamgeArray1: this.cardIamgeArray1, // 人像面数组
            cardIamgeArray2: this.cardIamgeArray2, // 国徽面数组
            wtsArray: this.wtsArray, // 委托书数组
            pictype: 1 // 身份证国徽面
          }
          localStorage.setItem('commonPersonData', JSON.stringify(commonPersonData))
          // 第一步预提交OCR
          let requestData = {
            imageContent: res.verifyBase64.split(',')[1], // 图片base64编码
            pictype: 0,
            uid: JSON.parse(localStorage.getItem('userInfo')).id // 用户id
          }
          // console.log(requestData)
          this.$axiosPost(this.$api.postocrinfo, requestData).then(res => {
            if (res.code === '0000') {
              // console.log(JSON.parse(res.data).token)
              // 第二步获取签名接口
              this.$axiosPost(this.$api.postStartocr, {token: JSON.parse(res.data).token}).then(res => {
                // console.log(res)
                if (res.code === '0000') {
                  // console.log(res.data)
                  this.token = res.data.token
                  this.signature = res.data.signature
                  this.$vux.loading.hide()
                  // 第三步提交form表单开始OCR认证
                  this.$nextTick(() => {
                    // console.log(this.$refs.formTrueName)
                    this.$refs.formTrueName[0].submit()
                  })
                } else {
                  this.$vux.loading.hide()
                  this.$vux.toast.text('无法识别，请重新上传身份证照片认证！')
                }
              })
            } else {
              this.$vux.loading.hide()
              this.$vux.toast.text('无法识别，请重新上传身份证照片认证！')
            }
          })
        }
      }, true)
    }
  }
}
</script>

<style lang="less">
  #verify-hosue-common{
    font-size: 15px;
    height: 100vh;
    background: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .step{
      height: 81px;
    }
    .start-tips{
      padding:6px 15px 0px 15px;
      background: #f4f4f4;
      color:#666;
    }
    .verify-item{
      padding: 10px 0px;
      border-top:6px solid #f4f4f4;
      .verify-img-title{
        margin-top: 10px;
        margin-bottom: 10px;
        padding-left: 12px;
        margin-left: 0px;
        line-height: 1;
        font-size: 15px;
        font-weight: bold;
        color: #333;
        border-left: 3px solid #ff9600;
      }
      .upload-img-title{
        padding:0px 15px 0px 15px;
        color:#999;
      }
      .verify-upload-img{
        padding:10px 15px;
        text-align: center;
        justify-content: flex-start;
        display: flex;
        // align-self: center;
        flex-wrap: wrap;
        .upload-img-item{
          padding-right: 10px;
          box-sizing: border-box;
          position: relative;
          z-index: 10;
          .m-img{
            width:100%;
            img{
              position: relative;
              z-index: -1;
              display: block;
              width: 5.35rem;
              height: 5.35rem;
              border:1px solid #ccc;
              border-radius: 5px;
              object-fit: contain;
            }
          }
          .m-download-img{
            width:100%;
            img{
              position: relative;
              z-index: -1;
              display: block;
              width: 5.35rem;
              height: 5.35rem;
              border:1px solid #ccc;
              border-radius: 5px;
              object-fit: contain;
            }
          }
          .m-tips{
            color: #999;
            font-size: 12px;
            width:5.35rem;
            padding-top: 10px;
            text-align: center;
          }
        }
      }
      .verify-add{
        border-bottom:6px solid #f4f4f4;
        height: 70px;
        // line-height: 70px;
        border-radius: 5px;
        // width:70px;
        text-align: center;
        margin: auto;
      }
      .verify-del{
        // border-bottom:6px solid #f4f4f4;
        border:1px solid #ff9600;
        float:right;
        color: #ff9600;
        padding: 2px 5px;
        border-radius: 5px;
        // width:70px;
        text-align: center;
        margin-right: 15px;
      }
      .verifyName{
        height: 50px;
        margin-top: 35px;
        flex: 1;
      }
    }
    .verify-btn{
      padding:0 15px;
      padding-top: 30px;
      padding-bottom: 10px;
    }
    .input-item{
      padding: 0px 15px;
      display: flex;
      line-height: 48px;
      .house-rent-style{
        display: flex;
        flex:1;
        .weui-cells__title {
          margin:0px;
          padding: 0px;
          color: black;
          font-size: 15px;
        }
        .weui-cells:before{
          border: none;
          height: 0px;
        }
        .weui-cell:before{
          border: none;
          height:0px;
        }
        .weui-cells:after{
          border:none;
        }
        .weui-cells_checkbox{
          display: flex;
          flex: 1;
          color:#999;
          justify-content: space-around;
        }
        .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
          color: #ff9600;
        }
      }
      span{
        width: 7rem;
      }
      .m-input{
        flex: 1;
        background: #fff;
        border:none;
        color: #999;
        outline:none;
        font-size: 15px;
        text-align: right;
      }
    }
    .m-border{
      border-bottom: 1px solid #f4f4f4
    }
  }
</style>
<style lang="less">
  #verify-hosue-common{
    .dialog-hint{
      .weui-dialog{
        padding: 15px;
        box-sizing: border-box;
        color: #343434;
        text-align: left;
        overflow: initial;
        margin-top: -30px;
        .infoConfirm-hint{
          font-size: 22px;
          text-align: center;
        }
        .hint-black{
          font-size: 16px;
        }
        .hint-content{
          // display: block;
          font-size: 14px;
          color: #777;
          max-height:300px;
          overflow-y:scroll;
          li{
            margin-top: 20px;
            margin-bottom: 20px;
          }
        }
        .icon-close{
          display: block;
          width: 35px;
          height: 35px;
          position: absolute;
          bottom: -63px;
          left: 0;
          right: 0;
          margin: auto;
          background: url('../../../images/icon_close.png') center no-repeat;
          background-size: 100%;
        }
      }
    }
  }
</style>
